<template>

  <div>
    <div class="mask" v-if="showMask">
      <div class="dialog">
        <div class="header">提示</div>
        <div class="body">
          <div class="msg">请输入您的名称</div>
          <input type="text" v-model="username" :class="err ? 'err' : 'default'">
          <div class="button" @click="submit">确定</div>
        </div>

      </div>
    </div>
    <router-view></router-view>
  </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const showMask = ref(true)
const err = ref(false)
const username = ref('')
onMounted(() => {
  localStorage.getItem('username') ? showMask.value = false : showMask.value = true
})
const submit = () => {
  if (username.value.trim() == "") {
    err.value = true
    return
  }
  localStorage.setItem('username', username.value)
  showMask.value = false
}
</script>
<style scoped lang='less'>
body {
  margin: 0;
}

.mask {
  z-index: 999;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  .dialog {
    width: 25%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    overflow: hidden;

    .header {
      width: 100%;
      background-color: skyblue;
      font-size: 25px;
      font-weight: 700;
      text-align: center;
      color: #fff;
      line-height: 4vw;
    }

    .body {
      width: 100%;
      padding: 1vw 2vw 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .msg {
        font-size: 20px;
        margin: 10px 0;
      }

      input {
        width: 80%;
        height: 30px;
        margin: 1vw 0;
        border-radius: 7px;
        transition: all .6s;
        border: 0;

        &:focus {
          outline: none;
        }
      }

      .err {
        border: 1px solid red !important;
        animation: identifier 2s;

        @keyframes identifier {
          0% {
            transform: translateX(0);
          }

          15% {
            transform: translateX(-5px);
          }

          20% {
            transform: translateX(5px);
          }

          25% {
            transform: translateX(-5px);
          }

          30% {
            transform: translateX(5px);
          }

          35% {
            transform: translateX(-5px);
          }

          40% {
            transform: translateX(5px);
          }

          45% {
            transform: translateX(-5px);
          }

          50% {
            transform: translateX(0);
          }

          100% {
            transform: translateX(0);
          }

        }
      }

      .default {
        border: 1px solid #ccc !important;
      }

      .button {
        width: 100%;
        height: 3vw;
        background-color: #409eff;
        color: #fff;
        text-align: center;
        line-height: 3vw;
        cursor: pointer;
        font-size: 20px;
        margin-top: 1vw;
      }
    }
  }
}
</style>